<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 27662
  Date: 2024/8/8
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>bookShow</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
</head>
<body style="background-color: skyblue">
<center>
    <h1>图书列表页</h1>
    <form action="${pageContext.request.contextPath}/show" method="get" id="f1">
        名称：<input type="text" name="likeName" value="${likeName}">
        <!--添加隐藏域 去第几页把页码数交给form中pageNum属性-->
        <input type="hidden" name="pageNum" id="pageNum">
        <input type="submit" value="查询">
        <input type="button" value="添加" onclick="toADD()">
        <input type="button" value="删除" onclick="del()">
    </form>
    <table class="table table-striped">
        <tr align="center">
            <th>
<%--                <input type="checkbox">--%>
<%--                <input type="button" value="全选/全不选" onclick="qx()">--%>
                <input type="checkbox" onclick="qx()">
            </th>
            <th>书名</th>
            <th>类别</th>
            <th>作者</th>
            <th>总页数</th>
            <th>图片</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <c:forEach var="book" items="${pageBean.beanList}">
            <tr align="center">
                <td>
<%--                    <input type="checkbox">--%>
                    <input type="checkbox" name="az" value="${book.id}">
                </td>
                <td>${book.bname}</td>
                <td>${book.cname}</td>
                <td>${book.author}</td>
                <td>${book.num}</td>
                <td>
                    <img src="${pageContext.request.contextPath}/static/img/${book.page}" width="150" height="200">
                </td>
                <td>${book.price}</td>
                <td>
                        <%--id  pageNum当前页码数--%>
                    <button onclick="update(${book.id},${pageBean.pageNum})">编辑</button>
                </td>
            </tr>
        </c:forEach>
    </table>
    第${pageBean.pageNum}页/共${pageBean.pages}页/共${pageBean.total}条记录
    <a href="javascript:go(1)">首页</a>
    <%--        页数大于1才有上一页--%>
    <c:if test="${pageBean.pageNum>1}">
        <a href="javascript:go(${pageBean.pageNum-1})">上一页</a>
    </c:if>

    <c:if test="${pageBean.pageNum<pageBean.pages}">
        <a href="javascript:go(${pageBean.pageNum+1})">下一页</a>
    </c:if>
    <a href="javascript:go(${pageBean.pages})">尾页</a>
</center>
</body>
<script>
    function go(pageNum){
        var page = document.getElementById("pageNum");
        page.value=pageNum;
        var f1 = document.getElementById("f1");
        f1.submit();
    }

    function toADD(){
        window.location.href="${pageContext.request.contextPath}/add";
    }

    function qx(){
        var az = document.getElementsByName("az")
        for (var i = 0; i < az.length; i++) {
            if (az[i].checked){
                az[i].checked=false;
            }else {
                az[i].checked=true;
            }
        }
    }

    function del(){
        var count = 0;
        var az = document.getElementsByName("az")
        for (var i = 0; i < az.length; i++) {
            if (az[i].checked){
                count++;
            }
        }
        if (count>0){
            // alert("执行删除")
            if (confirm("确定要删除吗？")){
                // alert("删除成功")
                var ids = "";
                var az = document.getElementsByName("az")
                for (var i = 0; i < az.length; i++) {
                    if (az[i].checked){
                        count++;
                        ids+=az[i].value+"-";
                        window.location.href="${pageContext.request.contextPath}/del?ids="+ids;
                    }
                }
            }else {
                alert("已取消")
            }
        }else {
            alert("至少选择一项进行删除")
        }
    }

    function update(id,pageNum){
        window.location.href="${pageContext.request.contextPath}/update?id="+id+"&pageNum="+pageNum;
    }
</script>
</html>
